<template>
  <div>
    <section class="section-feature section--course-banner ">
      <div class="course-banner inner-center clearfix">
        <!--课程列表-->
        <div class="imgtext-course ">
          <!--图片-->
          <div class="img-left--wrap">
            <img class="img-left"
                 src="https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLC7UdxWmVj5o3AHhJ8vpb73HvZo4WdaqOkgjzicWJrn5yZ64jLBIb112OF5XcBnXibUI/600"
                 alt="【南方机构VIP严选课程】JAVA互联网架构师专题/分布式/高并发/微服务" width="600" height="338">
            <div class="banner-cover">
              <div class="banner-cover-latest">
                <h2>JAVA互联网架构师专题/分布式/高并发/微服务</h2>
                <p> 开课时间：1月26日 20:10 <a href="javascript:void(0);" class="js-sign-up">进购买后进行观看</a></p>
              </div>
            </div>
            <ul class="pay-policy">
              <li class="pay-policy-title">承诺服务：</li>
              <li class="policy-item-pay">
                <a href="javascript:void(0);" class="js-promise-pay">
                  <i class="icon-policy"></i>
                  支付保障
                </a>
              </li>
              <li class="policy-item-refund--start">
                <a href="javascript:void(0);" class="js-promise-refund">
                  <i class="refund-icon1"></i>
                  开课前随时退
                </a>
              </li>
              <li class="employ-rights">
                <div class="employ-wrapper">
                  <i class="icon-employ"></i>
                  <span style="display: inline-block;">就业权益</span>
                </div>
              </li>
            </ul>
          </div>
          <!--课程详情-->
          <div class="text-right text-right--pay">
            <h1 class="page-tt">
              <span class="course-channel-tag">
                <img src="https://9.idqqimg.com/edu/tag-icon_16aad6545764553e9b4e9d3f5e9d17b7.png" class="tag-icon-xx">
              </span>
              <span class="premium-tag-react">

              </span>
              <span class="title-main">【南方机构VIP严选课程】JAVA互联网架构师专题/分布式/高并发/微服务</span>
            </h1>
            <div class="tt-below-line ">
              <span class="line-item statistics-apply custom-string">
                86621人 购买
              </span>
              <i class="icon-sep"></i>
              <span class="line-item statistics-rate">
                好评度
                <span class="rate-num">
                    100%
                </span>
              </span>
              <i class="icon-sep"></i>
              <span class="line-item btn-favorite " id="js_fav">
                <i class="el-icon-star-on"></i>
                 收藏
              </span>
              <i class="icon-sep"></i>
              <Button @click="openClassTags = true">点击查看课程标签</Button>
              <Drawer title="课程标签" :closable="false" v-model="openClassTags">
                <Tag color="cyan" size="large">高并发</Tag>
                <Tag color="cyan" size="large">Mysql</Tag>
                <Tag color="cyan" size="large">Java</Tag>
                <Tag color="cyan" size="large">JVM</Tag>
                <Tag color="cyan" size="large">MyBaits</Tag>
                <Tag color="cyan" size="large">JVM</Tag>
              </Drawer>
            </div>
            <div class="course-class course-class--three">
              <div class="class-content-list ">
                <div class="class-content js-term-item js-term-baseinfo class-content--no-des active">
                  <el-descriptions class="margin-top" :column="1" size="" border>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-alarm-clock"></i>
                        上课时间
                      </template>
                      21年08月 至 26年09月
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </div>
            <div class="js-course-price normal-course course-price active">
              <div class="course-price-react">
                <div class="basic-bar-layout">
                  <div class="basic-bar-layout-main">
                    <span class="basic-price">
                      <span class="basic-price-discount">
                        <span class="price custom-string">¥53662.22</span>
                      </span>
                      <span class="basic-price-origin">

                      </span>
                    </span>
                  </div>
                  <ul class="basic-bar-layout-mores"></ul>
                </div>
              </div>
              <p class="course-price-info " style="display: none;">

                <span class="price  custom-string">¥53662.22</span>

              </p>
            </div>
            <div class="oper-bar">
              <Button @click="goTo" class="yxinmiracle-btn"><span style="font-size: 18px"></span>点击购买</Button>
              <Button type="dashed" class="yxinmiracle-btn" style="margin-left: 15px"><span style="font-size: 18px"><i
                class="el-icon-message"></i>点击咨询</span></Button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section-main">
      <div class="inner-center clearfix">
        <main class="main">
          <div class="content tabs">
            <Row :gutter="16">
              <Col span="16">
                <Card>
                  <!--课程导航栏-->
                  <Menu mode="horizontal" theme="light" active-name="1">
                    <MenuItem name="1">
                      <Icon type="ios-paper"/>
                      课程概述
                    </MenuItem>
                    <MenuItem name="2">
                      <Icon type="ios-people"/>
                      目录
                    </MenuItem>
                    <MenuItem name="3">
                      <Icon type="ios-construct"/>
                      用户评论
                    </MenuItem>
                  </Menu>
                  <div class="class-detail">
                    <span style="font-size: 16px">教师简介</span>
                    <ul class='teacher-list' style='left: 15px;margin-top: 10px'>
                      <left-right-swiper-scroll v-if='isLoading'>
                        <li class='teacher-item' v-for='item in teacherList' :key='item.teacherId'>
                          <el-avatar class='teacher-avatar'
                                     :src=item.teacherAvatar
                                     :size='100'
                                     shape='circle'
                                     alt='我的头像'>
                          </el-avatar>
                          <div class='text-right'>
                            <h4 class='teacher-name'>
                              <a href='#' target='_blank'>{{ item.teacherName }}</a>
                            </h4>
                            <div class='teacher-intro' :title='item.teacherIntro'>{{ item.teacherIntro }}</div>
                          </div>
                        </li>
                      </left-right-swiper-scroll>
                    </ul>
                    <div class="intro-course">
                      <img style="margin-top: 20px;width: 100%"
                           src="https://10.idqqimg.com/qqke_course_info/ajNVdqHZLLD3PG54GVNZQia2ficwArX3D7UaMtze2vIpU4FjbqjKMpErW8lhztPdMyGgBr4v0EpG0/"
                           alt="">
                      <img style="margin-top: 10px;width: 100%"
                           src="https://10.idqqimg.com/qqke_course_info/ajNVdqHZLLCw4TNBcbKDDvg7Oibibm709x21HzwMXzoVy7PUwRb5z2NvmficJDiagPoERdL9vnf9sFo/"
                           alt="">
                      <img style="margin-top: 10px;width: 100%"
                           src="https://10.idqqimg.com/qqke_course_info/ajNVdqHZLLD1cmb1eFnxKhRS3YAcgasCgSRUBnuLbyjdRtdFRExDN2FEOkO1ibLVCp1YyXriaaUrU/"
                           alt="">
                      <img style="margin-top: 10px;width: 100%"
                           src="https://10.idqqimg.com/qqke_course_info/ajNVdqHZLLBgt2Rm5OOXza69VRyIkAZUffjg1sRph4FhFWFWic5uQH8bIBLkic8HP4FeWHEz38Szw/"
                           alt="">
                    </div>
                  </div>

                </Card>
              </Col>
              <Col span="8">
                <Card>
                  <div class="aside-blocks">
                    <div class="aside-block block--agency" auto-test="mod_course_aside_agency">
                      <div class="block-bd">
                        <h4 class="agency-tt">
                          <div class="tt-cover-url">
                            <a class="js-agency-cover" href="https://tuling.ke.qq.com" target="_blank">
                              <img
                                src="https://pic.yxinmiracle.com//pec/7f9eef3fb9884a048d78a157d2172569.jfif"
                                alt="南方机构" width="64" height="64">
                            </a>
                          </div>
                          <div class="tt-cover-name">
                            <a class="tt-link js-agency-name" href="https://tuling.ke.qq.com" title="图灵课堂"
                               target="_blank">
                              南方机构
                            </a>
                            <!-- 机构等级勋章 start  -->
                            <div class="js-agency-medal">
                              <div class="agency-medal">
                                <a class="icon-agency-medal icon-agency-medal_silver"
                                   href="https://ke.qq.com/faq.html#id=24" target="_blank">
                                  Java开发类目银牌机构
                                </a>
                              </div>
                            </div>
                            <!-- 机构等级勋章 end  -->
                          </div>
                        </h4>
                        <ul class="tree-list">
                          <li>
                            <p class="item-tt">好评度</p>
                            <span class="item-num">98%</span>
                          </li>
                          <li>
                            <p class="item-tt">课程数</p>
                            <span class="item-num js-item-num" data-num="196">196</span>
                          </li>
                          <li>
                            <p class="item-tt">学习人次</p>
                            <span class="item-num js-item-num" data-num="882473">88万</span>
                          </li>
                        </ul>
                        <div class="agency-summary">
                          广州南方学院（原中山大学南方学院）为2006年经教育部批准设立的综合性应用型普通本科高等学校，是广东省高等教育体制综合改革试点院校、广东省首批普通本科转型试点高校、广东省硕士学位授予立项建设单位、国家社会科学基金项目和国家自然科学基金项目依托单位。
                          学校提出并践行“有利于学生成长、有利于教师发展和有利于学校未来”的办学治校总原则，汇聚了一批继承国内一流大学优良传统和精神文化的院系主任、学科带头人和管理骨干，他们始终梦想能在学校这片“试验田”里推动中国高等教育改革，实现“建设位居中国应用型高校前列、特色鲜明的高水平大学”的愿景。
                        </div>
                      </div>
                    </div>
                  </div>
                </Card>
              </Col>
            </Row>
          </div>
        </main>
      </div>
    </section>
  </div>
</template>

<script>
  import LeftRightSwiperScroll from './LeftRightSwiperScroll'

  export default {
    name: 'ClassDetail',
    components: {
      LeftRightSwiperScroll
    },
    data () {
      return {
        classId: '',
        openClassTags: false,
        isLoading: true,
        teacherList: [
          {
            teacherId: 1,
            teacherName: '蔡泳信',
            teacherAvatar: '',
            teacherIntro: '南方机构初级讲师'
          }, {
            teacherId: 2,
            teacherName: '杨涛',
            teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
            teacherIntro: '南方机构高级后端工程师，拥有十年架构经验，蓝桥杯国家级一等奖'
          }, {
            teacherId: 3,
            teacherName: '张峻豪',
            teacherAvatar: 'https://gitee.com/yxinmiracle/pic/raw/master/imgv3.0/image-20220317144735679.png',
            teacherIntro: '南方机构高级后端工程师，拥有十年架构经验，蓝桥杯国家级一等奖'
          }, {
            teacherId: 4,
            teacherName: 'cyx',
            teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
            teacherIntro: 'cyx yyds'
          }, {
            teacherId: 5,
            teacherName: 'cyx',
            teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
            teacherIntro: 'cyx yyds'
          }, {
            teacherId: 6,
            teacherName: 'cyx',
            teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
            teacherIntro: 'cyx yyds'
          }, {
            teacherId: 7,
            teacherName: 'cyx',
            teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
            teacherIntro: 'cyx yyds'
          }
        ]
      }
    },
    methods: {
      getPathParams () {
        return this.$route.query.classId
      },
      getClassDetailData (classId) {
        console.log(classId)
      },
      goTo () {
        this.$router.replace({ path: '/purchase' })
      }
    },
    created () {
      this.getClassDetailData(this.getPathParams())
    },
    watch: {
      'activeName' (val) { //监听切换状态-计划单 // 注释，根据val的不同，跳转到不同
        let name
        switch (val) {
          case 'details':
            name = `user-space-record`
            break
          case 'share':
            name = `user-space-solution`
            break
          case 'menu':
            name = `user-space-blog`
            break
        }
        console.log(name)
        // 我的写法是每一个tab一个文件 如果不需要前进后退的话就不用push了
        this.$router.push({
          name: name,
          params: { userID: this.user.id }
        })
      }
    }
  }
</script>

<style scoped>

  .tree-list li:first-child {
    border-left: none;
  }

  .tree-list li {
    display: table-cell;
    border-left: 1px solid #e5e5e5;
    text-align: center;
  }

  .tree-list li .item-num {
    color: #999;
  }

  .agency-summary, .teacher-list .teacher-item .text-intro {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
  }

  .agency-summary {
    margin-top: 20px;
  }

  .tree-list {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .agency-medal .icon-agency-medal_silver:before {
    background-image: url(https://9.idqqimg.com/edu/silver_7eef90f719eb4fe971b1c216d7ee92c8.png) !important;
  }

  .block--agency .agency-medal .icon-agency-medal:before {
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background-size: auto 20px;
  }


  .agency-medal .icon-agency-medal:before {
    content: "";
    display: inline-block;
    background: 50% no-repeat;
  }

  .block--agency .agency-medal .icon-agency-medal {
    padding-left: 26px;
    display: inline-block;
    font-size: 14px;
    color: #999;
    height: 20px;
    line-height: 20px;
  }

  .block--agency .agency-medal {
    line-height: 20px;
  }

  .agency-medal {
    position: relative;
  }

  .block--agency .tt-cover-name .tt-link {
    padding-bottom: 7px;
    display: block;
  }

  .block--agency .tt-cover-name {
    margin-left: 84px;
    min-height: 64px;
  }

  .block--agency .tt-cover-url {
    position: absolute;
    top: 0;
    left: 0;
  }

  .block--agency .agency-tt {
    font-size: 16px;
    margin-bottom: 20px;
    position: relative;
  }

  .aside-block {
    padding: 20px 0 35px;
  }

  .aside-blocks {
    padding: 0 30px;
    background-color: #fff;
  }

  .intro-course {
    overflow: hidden;
  }

  .class-detail {
    padding-top: 15px;
  }


  .teacher-avatar {
    float: left;
    margin-right: 20px;
  }

  .teacher-list {
    width: 100%;
    white-space: nowrap;
    position: relative;
    margin-left: -15px;
    font-size: 0;
  }

  li, ul {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none outside none;
  }

  .teacher-item {
    display: inline-block;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 235px;
    margin-left: 30px;
  }

  .teacher-name {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    word-wrap: normal;
  }

  .teacher-list .teacher-item .teacher-name {
    color: #23b8ff;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .teacher-list .teacher-item .teacher-intro {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
  }

  .teacher-list .teacher-item .teacher-intro {
    max-height: 63px;
    font-size: 14px;
    overflow: hidden;
  }

  .l-aside-right .main .content {
    margin-right: 340px;
  }

  .content {
    /*background: #fff;*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px 30px;
  }

  .inner-center .main {
    float: left;
    width: 100%;
  }

  .inner-center, .inner-center .main {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .main {
    margin-bottom: 30px;
  }

  .clearfix:after, .clearfix:before {
    content: "";
    display: table;
  }

  .yxinmiracle-btn {
    width: 150px;
    height: 50px;
  }

  .imgtext-course .text-right--pay .oper-bar {
    position: static;
    margin-top: 25px;
  }

  .imgtext-course .oper-bar {
    bottom: 0;
    position: absolute;
  }


  .basic-price-origin {
    margin-left: 5px;
    font-size: 14px;
    color: #999;
    vertical-align: 3px;
  }

  .price {
    color: #e85308;
  }

  .basic-price-discount {
    font-size: 24px;
    color: #ff4f23;
  }

  .basic-price {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
  }

  .basic-bar-layout-main {
    background-color: #f4f4f4;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
  }

  .course-price-react {
    background-color: #fff;
  }

  .course-price {
    background-color: #f4f4f4;
    margin-top: 15px;
    color: #666;
  }

  .btn-favorite .i-heart {
    margin-right: 5px;
    font-size: 16px;
    vertical-align: 1px;
  }

  .icon-font {
    font-family: webfont;
    speak: none;
    font-style: normal;
    font-weight: 400;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 16px;
    position: relative;
    vertical-align: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .imgtext-course .tt-below-line .line-item {
    line-height: 30px;
    float: left;
  }

  .imgtext-course .tt-below-line .icon-sep {
    float: left;
    margin: 8px 20px 0;
  }

  .icon-agency-level, .icon-sep {
    display: inline-block;
    vertical-align: middle;
  }

  .icon-sep {
    width: 1px;
    height: 14px;
    background: #ddd;
  }

  .imgtext-course .tt-below-line .line-item {
    line-height: 30px;
    float: left;
  }

  .custom-string {
    font-family: custom-string;
  }

  .tabs {
    padding-left: 0;
    padding-right: 0;
  }

  .imgtext-course .tt-below-line:after, .imgtext-course .tt-below-line:before, .tabs-tt-bar:after, .tabs-tt-bar:before, .tips-buy-course .mod-course-banner_row:after, .tips-buy-course .mod-course-banner_row:before {
    content: "";
    display: table;
  }

  .imgtext-course .tt-below-line {
    color: #999;
    margin-bottom: 15px;
  }

  .imgtext-course .title-main {
    vertical-align: middle;
  }

  .tag-icon-xx {
    width: 36px;
  }

  img {
    border: 0;
    vertical-align: middle;
  }

  .course-channel-tag {
    margin-right: 4px;
  }

  .comment-list .comment-item .comment-bd, .comment-reply .reply-item .reply-bd, .imgtext-course .page-tt, .tb-course td {
    word-wrap: break-word;
    white-space: pre-wrap;
  }

  .imgtext-course .page-tt {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  .employ-rights .icon-employ {
    vertical-align: middle;
  }

  .pay-policy .refund-icon1 {
    background-position: 0 -24px;
  }

  .pay-policy .icon-employ, .pay-policy .icon-replay {
    width: 19px;
    height: 19px;
    margin-right: 2px;
    display: inline-block;
    margin-top: -1px;
  }

  .pay-policy .icon-employ {
    background: url(https://9.idqqimg.com/edu/icon-detail_1fc8a06ce43c756ffdd4ad399313f350.png) no-repeat -30px -48px;
  }


  .pay-policy .icon-policy, .pay-policy .refund-icon1 {
    width: 19px;
    height: 19px;
    margin-right: 2px;
    display: inline-block;
    margin-top: -1px;
    background: url(https://9.idqqimg.com/edu/icon-detail_1fc8a06ce43c756ffdd4ad399313f350.png) no-repeat;
  }

  .pay-policy li a i {
    display: inline-block;
    vertical-align: middle;
  }

  address, caption, cite, code, dfn, i, s, th, var {
    font-style: normal;
    font-weight: 400;
  }

  .pay-policy li a {
    color: #999;
  }

  .pay-policy li + li {
    margin-left: 16px;
  }

  .pay-policy li {
    float: left;
  }

  .pay-policy li {
    float: left;
  }

  .pay-policy li {
    float: left;
  }

  dd, dl, li, ol, ul {
    margin: 0;
    padding: 0;
  }

  user agent stylesheet
  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }

  .pay-policy {
    margin-top: 348px;
    bottom: 0;
    color: #999;
  }

  dd, dl, li, ol, ul {
    margin: 0;
    padding: 0;
  }

  ol, ul {
    list-style: none outside none;
  }

  user agent stylesheet
  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }

  .section--course-banner {
    padding: 20px 0 30px;
    margin-bottom: 20px;
    background: #fff;
    min-height: 400px;
  }

  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
  }

  .l-max .inner-center, .l-media .inner-center {
    width: 1200px;
  }

  .inner-center, .inner-center .main {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .inner-center {
    width: 1200px;
  }

  .inner-center {
    margin-left: auto;
    margin-right: auto;
  }

  .imgtext-course {
    padding-left: 630px;
    min-height: 360px;
    position: relative;
  }

  .imgtext-course .img-left, .imgtext-course .img-left--wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 338px;
  }

  .imgtext-course .img-left, .imgtext-course .img-left--wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 338px;
  }

  img {
    border: 0;
    vertical-align: middle;
  }

  .banner-cover {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    left: 0;
    top: 0;
    color: #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled="true", startColorstr="rgba(179, 21, 21, 0.10588)", endColorstr="rgba(179, 21, 21, 0.10588)");
    background-color: #15151b;
    background-color: rgba(21, 21, 27, .7);
  }

  .banner-cover:before, .banner-cover > div {
    display: inline-block;
    vertical-align: middle;
  }

  .banner-cover:before {
    content: "";
    height: 100%;
    width: 0;
  }

  .banner-cover:before, .banner-cover > div {
    display: inline-block;
    vertical-align: middle;
  }

  .banner-cover-latest {
    width: 100%;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .aside-course h4, .aside-recommend h4, .banner-cover-latest h2, .content-addition, .course-class--three .class-tt-list .item-name, .course-class-task .drop-down--class .drop-down-tt, .mod-choose-time_v2 .mod-choose-time__time, .package-dialog .pkg-info-agency, .package-dialog .pkg-info-title, .section--relation .recommend-benefit-des, .section--relation .recommend-course-tit, .task-task-list .task-task-item .task-tt-text, .teacher-list .teacher-item .text-tt, .tips-buy-course .mod-course-banner__title {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    word-wrap: normal;
  }

  .banner-cover-latest h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 400;
  }

  blockquote, body, figure, form, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }

  user agent stylesheet
  h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }

  .banner-cover-latest p {
    font-size: 16px;
  }

  blockquote, body, figure, form, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }

  user agent stylesheet
  p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .banner-cover-latest a {
    color: #fff;
    margin-left: 25px;
    display: inline-block;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
  }

  a, a:hover {
    text-decoration: none;
  }

  a {
    background: transparent;
    color: #23b8ff;
    -webkit-tap-highlight-color: transparent;
  }
</style>

